<!--
 * @Author: g05047
 * @Date: 2022-02-17 18:24:42
 * @LastEditors: g05047
 * @LastEditTime: 2022-02-24 17:09:22
 * @Description: file content
-->
<template>
  <div class="page">
    <go-back v-if="$route.query.isLink"></go-back>
    <div>
      <h2>接触进口冷链食品单位列表</h2>
    </div>
    <!-- 查询条件 -->
    <el-row :gutter="10" style="margin: 20px 0px">
      <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.areaCode"
          placeholder="地区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-cascader
          :options="statusOptions"
          v-model="bodyindustryStr"
          size="small"
          :props="{ checkStrictly: true }"
          placeholder="请选择单位业态"
          clearable
          @change="onBodyIndustryStr"
        >
        </el-cascader>
      </el-col>

      <el-col :span="4">
        <el-cascader
          clearable
          placeholder="请选择标签类别"
          size="small"
          v-model="categoryStr"
          :options="bodyindustryList"
          @change="onCascaderChange"
          :props="{
            checkStrictly: true,
          }"
        ></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="queryParam.tabelStatus"
          clearable
          size="small"
          placeholder="请选择单位状态"
        >
          <el-option label="接触进口冷链食品" value="0"></el-option>
          <el-option label="暂不经营进口冷链食品" value="1"></el-option>
        </el-select>
      </el-col>

      <!-- <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.licensenumber"
          placeholder="健康码"
          clearable
        >
          <el-option
            v-for="item in healthyQROptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.entrytime"
          placeholder="行程码"
          clearable
        >
          <el-option
            v-for="item in tripQROptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select
          size="small"
          v-model="queryParam.vaccination"
          placeholder="新冠疫苗接种"
          clearable
        >
          <el-option
            v-for="item in vaccinesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col> -->
      <el-col :span="5">
        <el-input
          maxlength="50"
          size="small"
          v-model="queryParam.search"
          placeholder="企业单位名称/统一社会信用代码"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="3" class="btn">
        <el-button type="primary" size="small" @click="handleQuery">
          查询
        </el-button>
        <el-button size="small" @click="handelExport" :loading="exportLoading">
          导出
        </el-button>
      </el-col>
    </el-row>

    <div class="red">
      友情提醒：移除按钮是用来移除单位注册时误勾选了“接触进口冷链食品”，实际上这家单位并不接触进口冷链食品；已添加在岗员工单位没有移除按钮；
    </div>
    <rz-height></rz-height>
    <!-- 表格数据 -->
    <el-table border stripe :data="tableData" style="width: 100%">
      <el-table-column
        prop="districtStreet"
        label="区域街道"
        align="center"
        width="130px"
      >
      </el-table-column>
      <el-table-column
        prop="bodyindustry"
        label="单位业态"
        align="center"
        width="220px"
      >
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.bodyindustry }}</span>
            <span v-if="scope.row.bodyindustryremarks"
              >--{{ scope.row.bodyindustryremarks }}</span
            >
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="bodyindustryremarks"
        label="单位业态备注"
        align="center"
        width="180px"
        show-overflow-tooltip
      >
      </el-table-column> -->

      <el-table-column
        prop="categoryOne"
        label="单位标签"
        align="center"
        width="180px"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.categoryOne">--</span>
          <span v-else-if="scope.row.categoryOne == scope.row.categoryTwo">{{
            scope.row.categoryOne
          }}</span>
          <span v-else-if="scope.row.categoryTwo">{{
            scope.row.categoryOne + "--" + scope.row.categoryTwo
          }}</span>
          <span v-else>{{ scope.row.categoryOne }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="identify"
        label="统一社会信用代码"
        align="center"
        show-overflow-tooltip
        width="190px"
      >
      </el-table-column>
      <el-table-column
        prop="unitname"
        label="单位名称"
        align="center"
        show-overflow-tooltip
        width="250px"
      >
      </el-table-column>
      <el-table-column
        prop="newlicenseno"
        label="许可证编号"
        align="center"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.newlicenseno === "" ? "--" : scope.row.newlicenseno }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        align="center"
        show-overflow-tooltip
        width="250px"
      >
      </el-table-column>
      <el-table-column
        prop="personnelTotal"
        label="在岗人数"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="green">{{ scope.row.personnelTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="healthCodeAbnormalityTotal"
        label="健康码异常"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
        <template slot-scope="scope">
          <span class="red">{{ scope.row.healthCodeAbnormalityTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="travelCodeAbnormalityTotal"
        label="行程码异常"
        align="center"
        width="100px"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="red">{{ scope.row.travelCodeAbnormalityTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="threeVaccinatedTotal"
        label="接种第三针"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="twoVaccinatedTotal"
        label="接种第二针"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="oneVaccinatedTotal"
        label="接种第一针"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="notVaccinatedTotal"
        label="未接种"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="red">{{ scope.row.notVaccinatedTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="todayShouldAdoptTotal"
        label="今日应采人数"
        align="center"
        show-overflow-tooltip
        width="120px"
      >
        <!-- <template slot-scope="scope">
          <span class="green">{{ scope.row.nucleicAcidFillInTotal }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="todayUncollectedTotal"
        label="今日未采人数"
        align="center"
        show-overflow-tooltip
        width="120px"
      >
        <template slot-scope="scope">
          <span class="red">{{ scope.row.todayUncollectedTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="nucleicAcidAbnormalTotal"
        label="过期未采人数"
        align="center"
        show-overflow-tooltip
        width="120px"
      >
        <template slot-scope="scope">
          <span class="red">{{ scope.row.nucleicAcidAbnormalTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="nucleicAcidBatchTotal"
        label="总采样批次数"
        align="center"
        show-overflow-tooltip
        width="110px"
      >
        <template slot-scope="scope">
          <span class="green">{{ scope.row.nucleicAcidBatchTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="nucleicAcidFillInTotal"
        label="如期采样批次数"
        align="center"
        show-overflow-tooltip
        width="120px"
      >
        <template slot-scope="scope">
          <span class="green">{{ scope.row.nucleicAcidFillInTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="supplementaryRecordingTotal"
        label="延期补录批次数"
        align="center"
        show-overflow-tooltip
        width="120px"
      >
        <template slot-scope="scope">
          <span class="red">{{ scope.row.supplementaryRecordingTotal }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="nucleicAcidAbnormalTotal"
        label="延期异常批次数"
        align="center"
        show-overflow-tooltip
        width="120px"
      >
        <template slot-scope="scope">
          <span class="red">{{ scope.row.nucleicAcidAbnormalTotal }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="createdatetime"
        label="注册日期"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="220"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="handelView(scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handelEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.personnelTotal == 0"
            size="mini"
            type="danger"
            @click="saveUnitDeleteById(scope.row)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="float: right; margin: 20px 0px"
      @current-change="handleCurrentChange"
      :page-size="queryParam.pageSize"
      :current-page.sync="queryParam.pageIndex"
      background
      layout="total, prev, pager, next"
      :total="listTotal"
      v-if="listTotal > 0"
    >
    </el-pagination>

    <!-- 单个单位信息弹窗 -->
    <el-dialog
      :visible.sync="singleUnitInfoDialogVisible"
      width="93%"
      :close-on-click-modal="false"
      :show-close="true"
      :destroy-on-close="true"
    >
      <SingleUnitInfo
        ref="singleUnitInfoRef"
        v-if="singleUnitInfoDialogVisible"
        :unitInfo="singleUnitInfo"
        @closeDialog="
          singleUnitInfoDialogVisible = false;
          handleQuery();
        "
        @edit="labelDialog = true"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="singleUnitInfoDialogVisible = false">
          关 闭
        </el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog
      width="30%"
      append-to-body
      title="编辑单位标签"
      :close-on-click-modal="false"
      :show-close="true"
      :destroy-on-close="true"
      :visible.sync="labelDialog"
    >
      <el-form ref="form" :model="query" label-width="80px">
        <el-form-item label="区域名称">
          <el-cascader
            :options="areaList"
            size="small"
            v-model="query.areaCode"
            placeholder="地区"
            :props="{
              value: 'areaCode',
              label: 'areaName',
              children: 'children',
            }"
            @change="areaChange"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item label="单位标签">
          <el-cascader
            placeholder="请选择单位标签"
            size="small"
            v-model="query.categoryStr"
            :options="bodyindustryList"
            @change="onCascader"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="冷链单位">
          <el-checkbox v-model="query.status" true-label="0" false-label="1"
            >接触进口冷链食品单位</el-checkbox
          >
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="labelDialog = false"> 关 闭 </el-button>
        <el-button @click="determine" type="primary"> 确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bodyIndustryOptions, bodyIndustryLabel } from "@/utils/configure";

import SingleUnitInfo from "@/views/coldLink/unitInfo/singleUnitInfo.vue";
import { groupArea } from "@/api/modules/enterprise";
export default {
  components: {
    SingleUnitInfo,
  },
  data() {
    return {
      areaOptions: [],
      bodyindustryList: [
        ...bodyIndustryLabel.list,
        { value: "未设定", label: "未设定" },
      ],
      statusOptions: bodyIndustryOptions, //业态
      // healthyQROptions: [
      //   {
      //     label: "异常",
      //     value: 0,
      //   },
      //   {
      //     label: "无异常",
      //     value: 1,
      //   },
      // ], //健康码状态
      // tripQROptions: [
      //   {
      //     label: "异常",
      //     value: 0,
      //   },
      //   {
      //     label: "无异常",
      //     value: 1,
      //   },
      // ], //行程码状态
      // vaccinesOptions: [
      //   { label: "已接种第三针", value: 3 },
      //   { label: "已接种第二针", value: 2 },
      //   { label: "已接种第一针", value: 1 },
      //   { label: "未接种", value: 0 },
      // ], //疫苗接种状态
      queryParam: {
        areaCode: "320500", //区域编码
        bodyindustry: "", //主体业态
        bodyindustryremarks: "",
        // licensenumber: "", //健康码 0异常 1无异常
        // entrytime: "", //行程码 0异常 1无异常
        // vaccination: "", //新冠疫苗接种 0未接种 1第一针 2第二针 3第三针
        search: "", //搜索(单位名称/社会信用代码)
        pageIndex: 1, //开始页码
        pageSize: 20, //每页记录条数
        tabelStatus: "0", //
        categoryOne: "", //
        categoryTwo: "", //

        // @ApiModelProperty(value = "冷链单位状态值 0或空正常 1停业停工")
        // private Short tabelStatus;

        // @ApiModelProperty(value = "食品生产单位、食品经营单位、第三方冷库、集中监管单位")
        // private String categoryOne;

        // @ApiModelProperty(value = "食品生产单位，餐饮服务提供者、食品销售经营者、单位食堂，第三方冷库，集中监管仓，白名单企业")
        // private String categoryTwo;
      }, //查询参数
      categoryStr: "",
      exportLoading: false, //导出按钮状态
      tableData: [], //表格数据
      listTotal: 0, //总条数
      bodyindustryStr: "",
      singleUnitInfoDialogVisible: false, //单个单位信息弹窗
      singleUnitInfo: "", //传入弹窗的单个单位信息
      labelDialog: false,
      query: {
        unitId: "",
        unitName: "",
        categoryOne: "",
        categoryTwo: "",
        categoryStr: "",
        districtCode: "",
        streetCode: "",
        status: "0",
        updateName: sessionStorage.getItem("logname"),
        updateDepartment: sessionStorage.getItem("unitName"),
        areaCode: [],
      },
      areaList: [],
      // bodyindustryList: [
      //   {
      //     value: "食品生产单位",
      //     label: "食品生产单位",
      //   },
      //   {
      //     value: "食品经营单位",
      //     label: "食品经营单位",
      //     children: [
      //       {
      //         value: "餐饮服务经营者",
      //         label: "餐饮服务经营者",
      //       },
      //       {
      //         value: "食品销售经营者",
      //         label: "食品销售经营者",
      //       },
      //       {
      //         value: "单位食堂",
      //         label: "单位食堂",
      //       },
      //     ],
      //   },
      //   {
      //     value: "第三方冷库",
      //     label: "第三方冷库",
      //   },
      //   {
      //     value: "集中监管单位",
      //     label: "集中监管单位",
      //     children: [
      //       {
      //         value: "集中监管仓",
      //         label: "集中监管仓",
      //       },
      //       {
      //         value: "白名单企业",
      //         label: "白名单企业",
      //       },
      //     ],
      //   },
      // ],
    };
  },
  created() {
    this.categoryStr = [
      this.$route.query.categoryOne,
      this.$route.query.categoryTwo,
    ].filter((x) => x);
    this.queryParam.categoryOne = this.$route.query.categoryOne || "";
    this.queryParam.categoryTwo = this.$route.query.categoryTwo || "";
    this.queryParam.areaCode = this.$route.query.code || "320500";
    this.queryParam.bodyindustry = this.$route.query.bodyindustry || "";
    this.queryParam.bodyindustryremarks =
      this.$route.query.bodyindustryremarks || "";

    this.bodyindustryStr = [
      this.$route.query.bodyindustry,
      this.$route.query.bodyindustryremarks,
    ].filter((x) => x);
    this.queryParam.search = this.$route.query.search || "";
    this.findAreaListNoParentByParentCode();
    this.getUnitInfoList();
    this.findAreaListNoParent();
  },
  mounted() {},
  methods: {
    //获取区域列表
    findAreaListNoParentByParentCode() {
      groupArea({
        params: {
          areaCode: this.queryParam.areaCode,
        },
      }).then((res) => {
        // this.areaOptions = [res.data];
        console.log("获取区域列表", res.data);
        this.areaOptions.push({
          label: res.data.areaName,
          value: res.data.areaCode,
        });
        // this.areaList = res.data.children;
        console.log(this.areaList);
        res.data.children.forEach((item1) => {
          this.areaOptions.push({
            label: item1.areaName,
            value: item1.areaCode,
          });
        });
      });
    },
    //获取区域列表
    findAreaListNoParent() {
      groupArea({
        params: {
          areaCode: this.queryParam.areaCode,
        },
      }).then((res) => {
        // this.areaOptions = [res.data];
        // console.log("获取区域列表", res.data);

        if (this.queryParam.areaCode == "320500") {
          this.areaList = res.data.children;
        } else {
          this.areaList = [res.data];
        }
        // console.log(this.areaList);
      });
    },
    //查询
    handleQuery() {
      this.queryParam.pageIndex = 1;
      this.getUnitInfoList();
    },

    //导出
    handelExport() {
      this.exportUnitList();
    },

    //查看
    handelView(row) {
      // let routeUrl = this.$router.resolve({
      // path: "/singleUnitInfo",
      // query: {
      //   declareId: val.declareId,
      //   reportUnitName: val.reportUnitName,
      // },
      // });
      // window.open(routeUrl.href, "_blank");

      // this.$router.push({
      //   name: "singleUnitInfo",
      //   params: {
      //     unitInfo: row,
      //   },
      // });
      if (row.categoryOne == row.categoryTwo) {
        this.query.categoryStr = [row.categoryOne];
        this.query.categoryOne = row.categoryOne;
        this.query.categoryTwo = row.categoryTwo;
      } else if (row.categoryTwo == "") {
        this.query.categoryStr = [row.categoryOne];
        this.query.categoryOne = row.categoryOne;
        this.query.categoryTwo = row.categoryOne;
      } else {
        this.query.categoryStr = [row.categoryOne, row.categoryTwo];
        this.query.categoryOne = row.categoryOne;
        this.query.categoryTwo = row.categoryTwo;
      }

      if (row.tabelStatus == "正常" || row.tabelStatus == "") {
        this.query.status = "0";
      } else {
        this.query.status = "1";
      }
      this.query.unitId = row.id;
      this.query.unitName = row.unitname;
      this.query.districtCode = row.districtCode;
      this.query.streetCode = row.streetCode;
      this.query.areaCode = [row.districtCode, row.streetCode];
      this.singleUnitInfo = row;

      this.singleUnitInfoDialogVisible = true;
      this.$nextTick(() => {
        //  仅在整个视图都被重新渲染之后才会运行的代码
        this.$refs.singleUnitInfoRef.getCollectionList();
        this.$refs.singleUnitInfoRef.getPersonList();
      });
    },
    handelEdit(row) {
      if (row.categoryOne == row.categoryTwo) {
        this.query.categoryStr = [row.categoryOne];
        this.query.categoryOne = row.categoryOne;
        this.query.categoryTwo = row.categoryTwo;
      } else if (row.categoryTwo == "") {
        this.query.categoryStr = [row.categoryOne];
        this.query.categoryOne = row.categoryOne;
        this.query.categoryTwo = row.categoryOne;
      } else {
        this.query.categoryStr = [row.categoryOne, row.categoryTwo];
        this.query.categoryOne = row.categoryOne;
        this.query.categoryTwo = row.categoryTwo;
      }

      if (row.tabelStatus == "正常" || row.tabelStatus == "") {
        this.query.status = "0";
      } else {
        this.query.status = "1";
      }
      this.query.unitId = row.id;
      this.query.unitName = row.unitname;
      this.query.districtCode = row.districtCode;
      this.query.streetCode = row.streetCode;

      this.query.areaCode = [row.districtCode, row.streetCode];

      this.singleUnitInfo = row;
      this.labelDialog = true;
    },
    onCascader(e) {
      if (e.length == 2) {
        this.query.categoryOne = e[0];
        this.query.categoryTwo = e[1];
      } else if (e.length == 1) {
        this.query.categoryOne = e[0];
        this.query.categoryTwo = e[0];
      } else {
        this.query.categoryOne = "";
        this.query.categoryTwo = "";
        this.query.categoryStr = "";
      }
    },
    determine() {
      if (this.query.categoryStr == "") {
        return this.$error("请选择单位标签");
      }

      this.$http.saveunitColdChainLabel(this.query).then((res) => {
        this.labelDialog = false;
        this.singleUnitInfoDialogVisible = false;
        this.handleQuery();
        this.$success('操作成功')
        //  this.singleUnitInfoDialogVisible=false;
      });

      // console.log(343);
    },
    //分页
    handleCurrentChange(val) {
      console.log("分页", val);
      this.queryParam.pageIndex = val;
      this.getUnitInfoList();
    },

    //获取单位信息列表
    getUnitInfoList() {
      // let params = JSON.parse(JSON.stringify(this.queryParam));
      // if (params.licensenumber === "") {
      //   params.licensenumber = -1;
      // }
      // if (params.entrytime === "") {
      //   params.entrytime = -1;
      // }
      // if (params.vaccination === "") {
      //   params.vaccination = -1;
      // }

      this.$http.getUnitList(this.queryParam).then((res) => {
        const { data } = res;
        this.tableData = data.list;
        this.listTotal = data.total;
      });
    },

    //导出单位信息
    exportUnitList() {
      this.exportLoading = true;
      // let params = JSON.parse(JSON.stringify(this.queryParam));
      // if (params.bodyindustry) {
      //   params.bodyindustry =
      //     // params.bodyindustry[params.bodyindustry.length - 1];
      //     params.bodyindustry[0];
      // }
      // if (params.licensenumber === "") {
      //   params.licensenumber = -1;
      // }
      // if (params.entrytime === "") {
      //   params.entrytime = -1;
      // }
      // if (params.vaccination === "") {
      //   params.vaccination = -1;
      // }
      //responseType: "blob"
      this.$http.exportUnitList(this.queryParam).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "接触进口冷链食品单位列表_" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象

        this.exportLoading = false;
      });
    },
    onCascaderChange(e) {
      if (e.length == 2) {
        this.queryParam.categoryOne = e[0];
        this.queryParam.categoryTwo = e[1];
      } else if (e.length == 1) {
        this.queryParam.categoryOne = e[0];
        this.queryParam.categoryTwo = "";
      } else {
        this.queryParam.categoryOne = "";
        this.queryParam.categoryTwo = "";
        this.categoryStr = "";
      }
    },
    saveUnitDeleteById(e) {
      this.$confirm(
        "确定将该单位移除接触进口冷链食品应检尽检单位吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http
          .saveUnitDeleteById({
            unId: e.id,
            remark: "",
            unitName: e.unitname,
            updateName: sessionStorage.getItem("logname"),
            updateDepartment: sessionStorage.getItem("unitName"),
          })
          .then((res) => {
            this.handleQuery();
          });
      }).catch(() => {})
    },
    onBodyIndustryStr(e) {
      if (e.length == 2) {
        this.queryParam.bodyindustry = e[0];
        this.queryParam.bodyindustryremarks = e[1];
      } else if (e.length == 1) {
        this.queryParam.bodyindustry = e[0];
        this.queryParam.bodyindustryremarks = "";
      } else {
        this.queryParam.bodyindustry = "";
        this.queryParam.bodyindustryremarks = "";
        this.bodyindustryStr = "";
      }
    },
    areaChange(e) {
      this.query.districtCode = e[0];
      this.query.streetCode = e[1];
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  padding: 10px 20px;
  .btn {
    display: flex;
    justify-content: flex-end;
  }

  /deep/.el-dialog__body {
    padding: 0px 20px;
    padding-bottom: 20px;
  }

  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
